【CSS】overflow - 領域から出たコンテンツの振る舞い

CSSのoverflowプロパティについて解説します。

検証環境

CSS

macOS

14.1

overflow

overflowは“領域から出たコンテンツの振る舞い”です。

上下と左右の振る舞いを一括設定します。

各振る舞いの個別設定はoverflow-y、overflow-xを使用します。

【CSS】overflow-x - 領域から出たコンテンツの振る舞い（左右）

【CSS】overflow-y - 領域から出たコンテンツの振る舞い（上下）

基本構文

overflow: 値;

値

代表的な値は次の通りです。

値	意味
auto	ユーザーエージェント（ブラウザ）の仕様
visible	表示
hidden	非表示
scroll	スクロール

サンプル

sample.html

<style>
div {
    width: 250px;
    height: 80px;
    border: 1px solid black;
    padding: 15px;
    ___ih_hl_start
    overflow: scroll;
    ___ih_hl_end
}
.p1 {
    white-space: nowrap;
}
</style>

<div>
    <p class="p1">
        CSS : Cascading Style Sheets.
        CSS is a programming language that decorates elements such as HTML and XML.
        You can set various properties such as text color, background, and size.
    </p>
    <p class="p2">
        CSS : Cascading Style Sheets.<br>
        CSS is a programming language<br>
        that decorates elements such as HTML and XML.<br>
        You can set various properties<br>
        such as text color, background, and size.<br>
    </p>
</div>

プレビュー